<template>


  <el-main style="height: 930px;">


    <div>


      <el-dialog :visible.sync="dialogDpVisible" title="选择配送员" @close="closeDialog">
        <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
          <el-input v-model="searchKeyword" placeholder="请输入关键词" style="width: 200px;"></el-input>
          <el-button @click="searchDp" style="margin-left: 10px;">搜索</el-button>
        </div>
        <el-table :data="filteredDeliveryPersons" style="width: 100%">
          <el-table-column prop="deliveryPersonId" label="ID" width="180px"></el-table-column>
          <el-table-column prop="name" label="配送员姓名" width="180px"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectDeliveryPerson(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>





      <el-dialog title="录入回执单" :visible.sync="dialogVisible" width="30%" @close="dialogVisible = false">
        <div>
          <!-- 在这里展示回执单信息，例如 -->
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: right;">配送单号</el-col>
            <el-col :span="16" style="text-align: left;">{{ receipt.deliveryOrderId }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: right;">配送员</el-col>
            <el-col :span="16" style="text-align: left;">{{ receipt.name }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: right;">配送员电话</el-col>
            <el-col :span="16" style="text-align: left;">{{ receipt.contactInfo }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: right;">收件人</el-col>
            <el-col :span="16" style="text-align: left;">{{ receipt.consumerName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: right;">配送地址</el-col>
            <el-col :span="16" style="text-align: left;">{{ receipt.consumerAddress }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: right;">分站</el-col>
            <el-col :span="16" style="text-align: left;">{{ receipt.substationName }}</el-col>
          </el-row>
        </div>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReceipt">确定</el-button>
    </span>
      </el-dialog>



      <el-select v-model="value" placeholder="请选择想要查询的信息"
                 style="position: relative;left: 420px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-input
        :placeholder="'请选择想要查找的信息'"
        v-model="target"
        clearable
        style="width: auto;left: 450px;position: relative;"
        @keyup.enter.native="getDetail"
        @keyup.backspace.native="getAll">
      </el-input>

      <el-button
        type="primary"
        icon="el-icon-search"
        class="btn1"
        style="position: relative;left: 480px;"
        @click="getDetail">
        搜索</el-button>

    </div>


    <div>
      <el-table
        :data="tableData"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%;"
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column
          prop="deliveryOrderId"
          label="配送单号"
          width="150px"
          sortable="true"
          text-align: center>
        </el-table-column>
        <el-table-column
          prop="consumerName"
          label="客户姓名"
          sortable="true"
          width="100px">
        </el-table-column>
        <el-table-column
          prop="consumerAddress"
          label="客户地址"
          sortable="true"
          width="100px">
        </el-table-column>
        <el-table-column
          prop="name"
          label="配送员"
          sortable="true"
          width="114px">
        </el-table-column>
        <el-table-column
          prop="contactInfo"
          label="配送员联系方式"
          sortable="true"
          width="154px">
        </el-table-column>
        <el-table-column
          prop="consumerPhone"
          label="收货人电话"
          sortable="true"
          width="114px">
        </el-table-column>

        <el-table-column
          prop="deliveryStatus"
          label="配送状态"
          sortable="true"
          width="100px">
          <template slot-scope="scope" >
            <el-tag
              :type="scope.row.deliveryStatus=='已完成'?'success':scope.row.deliveryStatus=='未开始'?'danger':scope.row.deliveryStatus=='进行中'?'info':'warning'">
              {{scope.row.deliveryStatus}}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" sortable="true">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.deliveryStatus=='已完成'?'info':'primary'"
              @click="buttonClick(scope.row.deliveryStatus, scope.row)"
            >
              {{ getButtonText(scope.row.deliveryStatus) }}
            </el-button>
          </template>
        </el-table-column>



<!--        <el-table-column label="操作" sortable="true">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button-->
<!--              size="mini"-->
<!--              type="primary"-->
<!--              round-->
<!--              @click="scope.row.deliveryStatus=='已完成'? finished() :scope.row.deliveryStatus=='未开始'? startDelivery(scope.row) :scope.row.deliveryStatus=='进行中'? endDelivery(scope.row):finished()">-->
<!--              {{ getButtonText(scope.row.deliveryStatus) }}-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 8, 10]"
        :total=allData.length
        :page-size="pageSize"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </el-main>


</template>

<script>

import axios from 'axios';

export default{
  name: 'Delivery_person',
  data(){
    return {
      deliveryPersonId:0,
      target:'',
      allData:[],
      deliveryPersons:[],
      filteredDeliveryPersons:[],
      searchKeyword:'',
      tableData:[{

      }],
      dialogVisible: false,
      dialogDpVisible: false,
      receipt: {},
      currentPage:1,
      pageSize:5,
      loading:false,
      options:[{
        value: 0,
        label: '-'
      }, {
        value: 1,
        label: '客户地址'
      }, {
        value: 2,
        label: '配送状态'
      }],
      value:0
    }
  },
  methods:{
    buttonClick(status, row) {
      if (status == '已完成') {
        this.finished();
      } else if (status == '未开始') {
        this.startDelivery(row);
      } else if (status == '进行中') {
        this.endDelivery(row);
      } else {
        this.finished();
      }
    },
    getButtonText(status) {
      console.log(status)
      if (status == '已完成') {
        return '无需操作';
      } else if (status == '未开始') {
        return '开始配送';
      } else if (status == '进行中') {
        return '结束配送';
      } else {
        return '无需操作';
      }
    },
    startDelivery(row){
      console.log("start")
      const data = row;
      row.deliverPersonId=this.deliveryPersonId;
      axios.post('http://localhost:8088/delivery-order/startdelivery',row).then(response => {
        this.getAll();
      }).catch(error => {
        console.error(error);
      });

    },
    endDelivery(row){
      console.log("end")
      const data = row;
      row.deliverPersonId=this.deliveryPersonId;
      axios.post('http://localhost:8088/delivery-order/enddelivery',row).then(response => {
        this.getAll();
      }).catch(error => {
        console.error(error);
      });
    },
    finished(){
      this.$message({
        message:'已结束配送，无需操作！',
        type:"success"
      })
    },
    searchDp() {
      this.filteredDeliveryPersons = this.deliveryPersons.filter(dp => {
        return dp.name.includes(this.searchKeyword);
      });
    },
    showDpDialog() {

      axios.get('http://localhost:8088/delivery-person/all').then(response => {
        this.deliveryPersons= response.data.data;
        this.filteredDeliveryPersons=this.deliveryPersons;
        this.dialogDpVisible = true;
      }).catch(error => {
        console.error(error);
      });
      this.dialogDpVisible = true;
    },
    getAll(){
      this.loading=true;
      axios.get('http://localhost:8088/delivery-order/byperson/'+this.deliveryPersonId).then(resData=>{
        // console.log(resData);
        this.allData = resData.data.data;
        this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
        this.loading=false;
      }).catch(err =>{
        this.loading=false;
      });
    },

    // getByPage(){
    //    this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
    //    console.log("asdsad"+this.tableData);
    //  },
    getDetail(){
      this.loading=true;
      switch(this.value){
        case 0:
          alert("请先选择想要查询的信息！");
          this.getAll()
          break;
        case 1:
          axios.get('http://localhost:8088/delivery-order/byperson/'+this.deliveryPersonId).then(resData=>{
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.consumerAddress.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });
          break;
        case 2:
          axios.get('http://localhost:8088/delivery-order/byperson/'+this.deliveryPersonId).then(resData=>{
            this.allData = resData.data.data;
            this.allData = this.allData.filter(row => {
              return row.deliveryStatus.includes(this.target);
            });
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });
          break;
      }
    },

    //上色功能，目前不知道为什么用不了，先放一放
    Dye({row,rowIndex}){
      if(rowIndex == 1){
        return 'success-row';
        // alert(row.orderStatus);
      } else if(row.orderStatus == "缺货"){
        return 'quehuo';
        // alert(row.orderStatus);
      }
      return '';
      // alert(row.orderStatus);
    },
    test(){
      alert("我被电了");
    },

    //分页用
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
      console.log(this.tableData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAll();
      console.log(this.tableData);
      // console.log(this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize));
    },
    selectDeliveryPerson(person) {
      this.deliveryPersonId=person.deliveryPersonId;
      this.dialogDpVisible = false;
      this.getAll();
    },

  },
  mounted() {
    this.showDpDialog();
    // this.loading=true;
    this.getAll();
    //
    // this.getByPage()
  }

}

</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #00aaff;
}

.el-table .quehuo {
  background: #FF0000;
}

.btn1 {
  position: relative;
  right: 0.625rem;
}

</style>

